<template>
  <div class="box">
    <!-- 搜索组件 -->
    <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" />
    
    <el-card>
      <div class="top_box">
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="nr">
              <div class="title">
                <p class="label color1">今日成交</p>
                <p class="num">人均消费：￥{{orderMsg.toDayConsumePer?orderMsg.toDayConsumePer:0}}</p>
              </div>
              <div class="content_box">
                <div class="content">
                  <p class="text">成交量</p>
                  <p class="num">{{orderMsg.toDayVol?orderMsg.toDayVol:0}}</p>
                </div>
                <div class="content">
                  <p class="text">成交额</p>
                  <p class="num">￥{{orderMsg.toDayAmount?orderMsg.toDayAmount:0}}</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="nr">
              <div class="title">
                <p class="label color2">昨日消费</p>
                <p class="num">人均消费：￥{{orderMsg.yesterdayConsumePer?orderMsg.yesterdayConsumePer:0}}</p>
              </div>
              <div class="content_box">
                <div class="content">
                  <p class="text">成交量</p>
                  <p class="num">{{orderMsg.yesterdayVol?orderMsg.yesterdayVol:0}}</p>
                </div>
                <div class="content">
                  <p class="text">成交额</p>
                  <p class="num">￥{{orderMsg.yesterdayAmount?orderMsg.yesterdayAmount:0}}</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="nr">
              <div class="title">
                <p class="label color3">近7日成交</p>
                <p class="num">人均消费：￥{{orderMsg.sevenDayConsumePer?orderMsg.sevenDayConsumePer:0}}</p>
              </div>
              <div class="content_box">
                <div class="content">
                  <p class="text">成交量</p>
                  <p class="num">{{orderMsg.sevenDayVol?orderMsg.sevenDayVol:0}}</p>
                </div>
                <div class="content">
                  <p class="text">成交额</p>
                  <p class="num">￥{{orderMsg.sevenDayAmount?orderMsg.sevenDayAmount:0}}</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="nr">
              <div class="title">
                <p class="label color4">近1个月成交</p>
                <p class="num">人均消费：￥0</p>
              </div>
              <div class="content_box">
                <div class="content">
                  <p class="text">成交量</p>
                  <p class="num">0</p>
                </div>
                <div class="content">
                  <p class="text">成交额</p>
                  <p class="num">￥0</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        
        
      </div>
    </el-card>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import { getAfterPayOrderFlow,pageStore } from '@/api/user'
export default {
  components: { SearchForm },
  data(){
    return{
      params: {},
      loading: false,
      storeList:[],
      storeId:'',
      orderMsg:{}
    }
  },
  computed: {
    formItems() {
      // 构建搜索表单
      return [
        { title: '选择店铺', type: 'select', key: 'storeId', options: this.storeList },
      ]
    }
  },
  created() {
    this.getPageStore()
  },
  methods: {
    async getOrder(){
      await getAfterPayOrderFlow({storeId:this.storeId}).then(res=>{
        if(res.statusCode == '00000'){
          this.orderMsg = res.data
        }
      })
    },

    async getPageStore(){
      await pageStore({current:1,size:20}).then(res=>{
        if(res.statusCode == '00000'){
          let arr = JSON.stringify(res.data.records).replace(/storeName/g,'label').replace(/storeId/g,'value')

          this.storeList = JSON.parse(arr)
          this.storeId = this.storeList[0].value
          console.log(this.storeList)
        }
      })
    },
    // 搜索按钮
    onSearch() {
      console.log(this.params)
      this.storeId = this.params.storeId
      this.getOrder()
    },
  }
}
</script>

<style lang="scss" scoped>
.box{
  margin: 20px;
  .top_box{
    .nr{
      border:1px solid rgb(223, 221, 221);
      margin-bottom:34px;
      .title{
        height: 50px;
        border-bottom:1px solid rgb(223, 221, 221);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 30px;
        .label{
          padding:2px 10px;
          border-radius: 6px;
          color:#fff;
        }
        .color1{
          background: #1BB293;
        }
        .color2{
          background: #1887C9;
        }
        .color3{
          background: #F9AD5B;
        }
        .color4{
          background: #F2575D;
        }
        p{
          margin:0;
        }
      }
      .content_box{
        display: flex;
        align-items: center;
        justify-content: space-around;
        text-align: center;
        padding:40px 0;
        p{
          margin:0;
        }
        .num{
          font-size:30px;
          margin-top:10px;
        }
      }
    }
  }
}
</style>
  